/*
 * @Author: captern
 * @@Gitee: https://gitee.com/captern
 * @@websit: http://www.captern.cn/
 * @Date: 2020-06-22 09:25:49
 * @LastModifiedBy: captern
 * @LastEditTime: 2020-08-14 14:00:55
 * @Description:
 */
import React from "react"
import PropTypes from "prop-types"
import { observer, inject } from "mobx-react"
import ApiModel from "../../../api/apiModel/apiModel"
import EndPop from "../../../components/pops/endPop"
import "./checkMethod.scss"

@inject("UserStore")
@observer
class CheckMethod extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {
      nowMethod: 1,
    }
  }
  componentWillMount() {}
  componentDidUpdate() {}
  componentDidMount() {}
  componentWillUnmount() {}

  postMethod = () => {
    this.props.UserStore.changeMethod(this.state.nowMethod)
    this.props.UserStore.changeUserState("methodMsg")
  }
  setErrorMsgFun = (errorMsg) => {
    this.props.UserStore.setErrorMsg(true, errorMsg)
    this.timer = setTimeout(() => {
      this.props.UserStore.setErrorMsg(false, "")
    }, 3000)
  }
  showOrHideLoading = (flag, msg) => {
    this.props.UserStore.setPostOrGetData(flag, msg)
  }

  render() {
    let { nowMethod } = this.state
    let checkIcon = (
      <div className="method-check-border">
        <div className="method-check-border-white">
          <img
            className="check-icon"
            src={require("../../../static/upload/icon_fangsi_gouxuan_ok.png")}
            alt=""
          />
        </div>
      </div>
    )
    return (
      <div className="check-method-container">
        <EndPop />
        <div className="method-bkg-area">
          <div className="method-title jiating">
            <div className="method-text">请选择参赛方式</div>
          </div>
        </div>
        <div className="method-area">
          <div
            onClick={() => {
              this.setState({
                nowMethod: 1,
              })
              // this.props.UserStore.changeMethod(1)
            }}
            className="methon-item xuexiao"
          >
            {nowMethod === 1 && checkIcon}
          </div>

          <div
            onClick={() => {
              this.setState({
                nowMethod: 2,
              })
              // this.props.UserStore.changeMethod(2)
            }}
            className="methon-item jiating"
          >
            {nowMethod === 2 && checkIcon}
          </div>
          <div
            className="methon-next"
            onClick={() => {
              this.postMethod()
            }}
          >
            下一步
          </div>
        </div>
      </div>
    )
  }
}

export default CheckMethod
